<template>
  <div class="page app-add">
    <el-form label-position="top" label-width="80px" :model="app" class="appadd-form" :rules="rules" ref="appAddForm">
      <el-form-item label="应用名称" prop="name">
        <el-input v-model.trim="app.name"></el-input>
      </el-form-item>
      <el-form-item label="应用描述" prop="desc">
        <el-input v-model.trim="app.desc" type="textarea" rows="4" maxlength="150" show-word-limit></el-input>
      </el-form-item>
      <el-form-item class="appadd-button-item">
        <el-button type="primary" @click="addApp('appAddForm')">添加应用</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'AppAdd',
  data () {
    return {
      app: {
        name: '',
        desc: ''
      },
      rules: {
        name: [
          {
            required: true,
            message: '请输入应用名称',
            trigger: 'blur'
          }
        ],
        desc: [
          {
            required: true,
            message: '请填写应用描述',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    addApp (formName) {
      this.$refs[formName].validate((valid, obj) => {
        if (valid) {
          phax.post('/account_allocation/app/create', { json: this.app }).then(res => {
            this.$router.push('/app_list')
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="stylus">
.app-add
  display: flex;
  justify-content: center;
  align-items: center;
  .appadd-form
    width: 400px
  .appadd-button-item
    text-align center
</style>
